<template>
  <div class="app-container">
    <el-card>
      <list
        :soils="soils"
        @del="del"
        @edit="edit"
        @add="add"
      />
    </el-card>
    <el-dialog
      v-el-drag-dialog
      :title="title"
      :visible.sync="dialogVisible"
      append-to-body
      width="800px"
    >
      <main-form
        :form-data="formData"
        @submit="submit"
      />
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import List from './component/list'
import MainForm from './component/main-form'
import CommonMixin from '@/mixin/CommonMixin'
import { getAll, addOne, updateOne } from '@/api/soil'
export default {
  components: {
    List,
    MainForm
  },
  directives: { elDragDialog },
  mixins: [CommonMixin],
  data() {
    return {
      soils: [],
      formData: {
        name: '',
        unit_weight: '',
        field_capacity: '',
        wilting_coefficient: '',
        water_content: '',
        runoff_curve: ''
      }
    }
  },
  methods: {
    async getList() {
      const { data } = await getAll()
      this.soils = data.data
    },
    getOne(row) {
      this.formData = row
      this.dialogVisible = true
    },
    async addOne(formData) {
      const { msg } = await addOne(formData)
      this.$message.success(msg)
      this.dialogVisible = false
      this.getList()
    },
    async updateOne(formData) {
      const { msg } = await updateOne(formData.id, formData)
      this.$message.success(msg)
      this.dialogVisible = false
      this.getList()
    },
    edit(row) {
      this.formData = row
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
